import { Layout, Accordion, UserSubPageBase } from "@/components";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import style from "./index.module.scss";

type FqaListItemShape = {
  problem: string;
  answer: string;
};

export default function FrequentQuestionsPage() {
  const [fqaList, setFqaList] = useState<FqaListItemShape[]>([]);

  useEffect(() => {
    Taro.request({
      url: `${process.env.apiEndpoint}/about/fqa`,
      success(result) {
        setFqaList(result.data.data.FQA as FqaListItemShape[]);
      },
    });
  }, []);

  return (
    <Layout>
      <UserSubPageBase
        title="常见问题"
        subTitleParagraph="L'ÉCOLE珠宝艺术中心常见问题"
        scrollable
      >
        <View className={style.list}>
          {fqaList.map((fqaItem, fqaItemIdx) => (
            <Accordion
              key={fqaItemIdx}
              title={fqaItem.problem}
              content={fqaItem.answer.split(/\n/).map((chunk) => ({
                type: "text",
                text: chunk,
              }))}
            />
          ))}
          <Accordion
            title="取消订单和退款有何规定？"
            content={[
              {
                type: "inline-text",
                text: "详情请参考",
              },
              {
                type: "inline-link",
                text: "取消/退货政策",
                linkData: {
                  link: "pages/terms-conditions/index",
                  type: "navigate",
                },
              },
              {
                type: "inline-text",
                text: "。",
              },
            ]}
          />
        </View>
      </UserSubPageBase>
    </Layout>
  );
}
